<template>
	<view class="u-p-l-20 u-p-r-20">
		<view>
			<u-swiper :list="swiperList" height="300" @click="clickImg"></u-swiper>
		</view>
		<view class="u-p-t-20 u-p-b-20">
			<u-section title="签约设计师" sub-title="全部" :right="false" :show-line="false" :bold="false" font-size="32"></u-section>
		</view>
		<view>
			<view>
				<scroll-view scroll-x="true" class="kite-classify-scroll">
					<view class="kite-classify-cell" v-for="(item, index) in curriculum" :key="index">
						<view class="cell-view" @click="viewDesigner(item)">
							<view class="main-flex cell-img">
								<image :src="item.src"></image>
							</view>
							<view class="cell-text">{{item.code}}</view>
							<view class="cell-btn">
								查看作品
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="main-flex" style="justify-content:space-around;
		background-color: #f8f8f8;height: 60rpx;line-height: 60rpx;
		border-radius: 6px;">
			<view class="item-desc">装修面积</view>
			<view class="item-desc" @click="show = true">
				<text style="margin-right: 10rpx;">{{selectArea.label}}</text>
				<u-icon name="arrow-down" size="28"></u-icon>
			</view>
		</view>
		<view>
			<u-waterfall v-model="flowList" ref="uWaterfall">
			    <template v-slot:left="{leftList}">
			        <view class="demo-warter" v-for="(item, index) in leftList" :key="index">
			            <u-lazy-load threshold="750" border-radius="12" :image="item.project_cover_img" :index="index"
			                         @click="clickImage(item)"></u-lazy-load>
						<view style="margin-top: 10rpx;margin-left: 10rpx;
						display: flex;justify-content: space-between;align-items: center;">
							<view>
								<image
								style="width: 80rpx;height: 80rpx;border-radius: 100%;margin-top: -50rpx;margin-left: 10rpx;
								position: relative;"
								:src="item.avatar"></image>
								<view style="width: 100rpx;text-align: center;color:#999">{{item.user_name}}</view>
							</view>
							<view style="display: flex;height: 50rpx;line-height: 50rpx;color: #999;">
								<i class="iconfont icon-star" style="color: #999;font-size: 18px;"></i>
								<view style="display: flex;font-size: 14px;margin:0 5rpx;">
									{{item.collect}}
								</view>
							</view>
						</view>
			        </view>
			    </template>
			    <template v-slot:right="{rightList}">
			        <view class="demo-warter" v-for="(item, index) in rightList" :key="index">
			            <u-lazy-load threshold="750" border-radius="10" :image="item.project_cover_img" :index="index"
			                         @click="clickImage(item)"></u-lazy-load>
						<view style="margin-top: 10rpx;margin-left: 10rpx;
						display: flex;justify-content: space-between;align-items: center;">
							<view>
								<image
								style="width: 80rpx;height: 80rpx;border-radius: 100%;margin-top: -50rpx;margin-left: 10rpx;
								position: relative;"
								:src="item.avatar"></image>
								<view style="width: 100rpx;text-align: center;color:#999">{{item.user_name}}</view>
							</view>
							<view style="display: flex;height: 50rpx;line-height: 50rpx;color: #999;">
								<i class="iconfont icon-star" style="color: #999;font-size: 18px;"></i>
								<view style="display: flex;font-size: 14px;margin:0 5rpx;">
									{{item.collect}}
								</view>
							</view>
						</view>
			        </view>
			    </template>
			</u-waterfall>
		</view>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="findHouseList" style="height: 80rpx;line-height: 80rpx;"></u-loadmore>
		<u-back-top :scroll-top="scrollTop" top="1000"></u-back-top>
		<u-no-network></u-no-network>
		<u-select v-model="show" :list="areaList"  @confirm="confirm"></u-select>
	</view>
</template>

<script>
	import config from "@/common/config.js" // 全局配置文件
	export default {
		data() {
			return {
				show: false,
				selectArea:{
					label: '80平-100平',
					value: 2,
				},
				areaList: [
					{
						label: '0平-60平',
						value: 0,
					},
					{
						label: '60平-80平',
						value: 1,
					},
					{
						label: '80平-100平',
						value: 2,
					},
					{
						label: '100平-120平',
						value: 3,
					},
				],
				swiperList: [],
				curriculum: [],
				keyword: '',
				pageNum: 1,
				pageSize: 20,
				scrollTop: 0,
				houseList: [],
				loadStatus: 'nomore',
				flowList: [],
			}
		},
		onLoad() {
			// 获取数据
			this.findSwiperList();
			this.findDesign();
			this.findHouseList();
		},
		onPageScroll(e) {
		    this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
		    this.loadStatus = 'nomore';
		    // 获取数据
			// this.findHouseList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 获取数据
			this.findHouseList(1);
			// 关闭刷新
			uni.stopPullDownRefresh();
		},
		methods: {
			findSwiperList(){
				let url = "/api/v1/index-infos";
				this.$u.get(url, {
				}).then(result => {
					for (let i = 0; i < result.carousels.length; i++) {
						let item = result.carousels[i];
						this.swiperList.push({
							image:item.carousel_url,
							title:item.carousel_url
						})
					}
				});
			},
			findDesign(){
				let url = "/designer-api/v1/designers";
				this.$u.get(url, {
				}).then(result => {
					for (let i = 0; i < result.list.length; i++) {
						let item = result.list[i];
						this.curriculum.push({
							id:item.user_id,
							code:item.user_name,
							src:item.avatar,
						})
					}
				});
			},
			findHouseList(type = 0) {
				if(type == 1){
					this.pageNum = 1
					this.flowList = []
					this.$refs.uWaterfall.clear();
				}
				let url = "/api/v1/search";
				this.$u.get(url, {
					page_number: this.pageNum,
					page_size:this.pageSize,
					size:this.selectArea.value
				}).then(result => {
					this.flowList = result.list
				});
			},
			viewDesigner(item){
				this.$u.route({
					url: '/pages/designer/designer',
					params: {
						designerId: item.id
					}
				})
			},
			clickImage(item){
				this.$u.route({
					url: '/pages/product/product',
					params: {
						productId: item.project_id
					}
				})
			},
			confirm(e) {
				this.selectArea = e[0]
				this.findHouseList(1);
			},
			clickImg(index){
				let imgArr = this.swiperList.map(val=>{
					return val.image
				})
				 // 预览图片
				uni.previewImage({
					current: index,
					urls: imgArr
				});
			},
		}
	}
</script>

<style>
	page{
		background-color:#FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.kite-classify-scroll {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
	}
	
	.kite-classify-cell {
		display: inline-block;
		width: 180rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
		.cell-view{
			width: 150rpx;
			height: 200rpx;
			box-shadow: 0px 1px 20px 0px rgba(0,0,0,0.1),inset 1px -1px 3px 0px rgba(0,0,0,0.1);
			border-radius: 10%;
			.cell-img{
				image{
					margin-top: 20rpx;
					width: 80rpx;height: 80rpx;border-radius: 100%;
				}
			}
			.cell-text{
				text-align: center;
				margin-top: 6rpx;
			}
			.cell-btn{
				margin-top: 4rpx;
				text-align: center;
				background-color: #E7551C;
				border-radius: 8px;
				color: #ffffff;
				font-size: 10px;
				padding:3rpx;
				width: 80%;
				margin-left: 10%;
			}
		}
	}	
	
	.ic-img{
		display: inline-block;margin-left: 15rpx;line-height: 30rpx;
	}
	
	.demo-warter {
	    border-radius: 8px;
	    margin-top: 3px;
	    background-color: #ffffff;
	    padding: 3px;
	    position: relative;
	}
	
	.item-title {
	    font-size: 28rpx;
	    color: $u-main-color;
	    font-weight: bold;
		padding-top: 15rpx;
		padding-left: 3rpx;
	}
	
	.item-desc {
	    font-size: 26rpx;
	    color: $u-tips-color;
		height: 60rpx;line-height: 50rpx;
	}
</style>
